//在 Flutter 里，则使用动画库，通过将 Widget 嵌入一个动画 Widget 的方式实现 Widget 的动画效果。
//
//Flutter 通过 Animation<double> 的子类 AnimationController 来暂停、播放、停止以及逆向播放动画。它需要一个 Ticker 在垂直同步 (vsync) 的时候发出信号，
// 并且在运行的时候创建一个介于 0 和 1 之间的线性插值。然后你就可以创建一个或多个 Animation，并将它们绑定到控制器上。
//
//例如，你可以使用 CurvedAnimation 来实现一个曲线插值的动画。在这种情况下，控制器决定了动画进度，CurvedAnimation 计算用于替换控制器默认线性动画的曲线值。
// 和 Widget 一样，Flutter 中的动画效果也可以组合使用。
//
//在构建 Widget 树的时候，你需要将 Animation 对象赋值给某个 Widget 的动画属性，例如 FadeTransition 的不透明度属性，并让控制器开始动画。
//
//下面的例子展示了如何实现一个点击 FloatingActionButton 的时候将一个 Widget 渐变为一个图标的 FadeTransition
import 'package:flutter/material.dart';

void main() {
  runApp(FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade Demo1',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFadeTest(title: 'Fade Demo2'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyFadeTest createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
              child: FadeTransition(
                  opacity: curve,
                  child: FlutterLogo(
                    size: 100.0,
                  )))),

      //然后就像使用其它 Flutter Widget 一样使用 CustomButton：
      floatingActionButton: CustomBtn("自定义按钮", () {
        print("点击一下~~");
        controller.forward();
      }), /* FloatingActionButton(
        tooltip: 'Fade',
        child: Icon(Icons.brush),
        onPressed: () {
          print("点击一下~~");
          controller.forward();
        },*/ /*
      ),*/
    );
  }
}

//如何创建自定义 Widget？
//在 Android 中，一般通过继承 View 类，或者使用已有的视图类，再覆写或实现可以达到特定效果的方法。
//
//在 Flutter 中，通过 组合 更小的 Widget 来创建自定义 Widget（而不是继承它们）。这和 Android 中
// 实现一个自定义的 ViewGroup 有些类似，所有的构建 UI 的模块代码都在手边，不过由你提供不同的行为—例如，自定义布局 (layout) 逻辑。
//
//举例来说，你该如何创建一个在构造器接收标签参数的 CustomButton？你要组合 RaisedButton 和一个标签来创建自定义按钮，而不是继承 RaisedButton：
class CustomBtn extends StatelessWidget {
  final String label;
  final Function callback;

  CustomBtn(this.label, this.callback);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: this.callback,
      child: new Text(label),
    );
  }
}
